<template>
  <view class="match-create-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">创建赛事</text>
      <text class="page-subtitle">填写赛事基本信息</text>
    </view>
    
    <!-- 创建表单 -->
    <view class="form-section">
      <view class="form-card">
        <view class="form-item">
          <text class="form-label">赛事名称 *</text>
          <input 
            class="form-input" 
            v-model="formData.name" 
            placeholder="请输入赛事名称"
            maxlength="100"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">开始时间 *</text>
          <picker 
            class="form-picker" 
            mode="date" 
            :value="startDate" 
            @change="onStartDateChange"
          >
            <text class="picker-text">{{ startDate || '请选择开始日期' }}</text>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="form-label">结束时间 *</text>
          <picker 
            class="form-picker" 
            mode="date" 
            :value="endDate" 
            @change="onEndDateChange"
          >
            <text class="picker-text">{{ endDate || '请选择结束日期' }}</text>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="form-label">赛事状态</text>
          <picker 
            class="form-picker" 
            :value="statusIndex" 
            :range="statusOptions" 
            @change="onStatusChange"
          >
            <text class="picker-text">{{ statusOptions[statusIndex] }}</text>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="form-label">比赛模式</text>
          <picker 
            class="form-picker" 
            :value="matchModelIndex" 
            :range="matchModelOptions" 
            @change="onMatchModelChange"
          >
            <text class="picker-text">{{ matchModelOptions[matchModelIndex] }}</text>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="form-label">赞助商</text>
          <input 
            class="form-input" 
            v-model="formData.sponsor" 
            placeholder="请输入赞助商信息"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">赛事描述</text>
          <textarea 
            class="form-textarea" 
            v-model="formData.desc" 
            placeholder="请输入赛事描述"
            maxlength="500"
          />
        </view>
        
        <view class="form-buttons">
          <button class="submit-btn" @click="createMatch" :disabled="loading">
            {{ loading ? '创建中...' : '创建赛事' }}
          </button>
          <button class="cancel-btn" @click="goBack">取消</button>
        </view>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-content">
        <view class="loading-spinner"></view>
        <text class="loading-text">创建中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { MatchAPI } from '@/api/battle.js'

// 响应式数据
const loading = ref(false)
const startDate = ref('')
const endDate = ref('')
const statusIndex = ref(0)
const matchModelIndex = ref(0)

// 表单数据
const formData = ref({
  name: '',
  startTime: 0,
  endTime: 0,
  desc: '',
  sponsor: '',
  status: 0,
  matchModel: 0,
  matchModelId: ''
})

// 状态选项
const statusOptions = ['草稿', '已发布', '进行中', '已结束']
const statusMap = {
  0: 0, // 草稿
  1: 1, // 已发布
  2: 1, // 进行中 (使用已发布状态)
  3: 2  // 已结束
}

// 比赛模式选项 - 固定两个选项
const matchModelOptions = ['普通赛事', '周期赛事']
const matchModelList = [
  { matchModelId: 'model_0', matchModel: 0, matchModelName: '普通赛事' },
  { matchModelId: 'model_1', matchModel: 1, matchModelName: '周期赛事' }
]

// 开始日期变化
const onStartDateChange = (e) => {
  startDate.value = e.detail.value
  formData.value.startTime = new Date(e.detail.value).getTime()
}

// 结束日期变化
const onEndDateChange = (e) => {
  endDate.value = e.detail.value
  formData.value.endTime = new Date(e.detail.value + ' 23:59:59').getTime()
}

// 状态选择变化
const onStatusChange = (e) => {
  const index = e.detail.value
  statusIndex.value = index
  formData.value.status = statusMap[index]
}

// 比赛模式选择变化
const onMatchModelChange = (e) => {
  const index = e.detail.value
  matchModelIndex.value = index
  formData.value.matchModel = index // 直接使用索引作为matchModel值
  formData.value.matchModelId = `model_${index}` // 生成对应的matchModelId
}

// 加载比赛模式列表 - 不再需要从API获取
const loadMatchModels = () => {
  // 设置默认选择第一个（普通赛事）
  formData.value.matchModel = 0
  formData.value.matchModelId = 'model_0'
}

// 创建赛事
const createMatch = async () => {
  // 表单验证
  if (!formData.value.name.trim()) {
    uni.showToast({
      title: '请输入赛事名称',
      icon: 'none'
    })
    return
  }
  
  if (!formData.value.startTime) {
    uni.showToast({
      title: '请选择开始时间',
      icon: 'none'
    })
    return
  }
  
  if (!formData.value.endTime) {
    uni.showToast({
      title: '请选择结束时间',
      icon: 'none'
    })
    return
  }
  
  if (formData.value.endTime <= formData.value.startTime) {
    uni.showToast({
      title: '结束时间必须大于开始时间',
      icon: 'none'
    })
    return
  }
  
  loading.value = true
  try {
    const result = await MatchAPI.create({
      matchId: `match_${Date.now()}`,
      name: formData.value.name,
      startTime: formData.value.startTime,
      endTime: formData.value.endTime,
      desc: formData.value.desc,
      sponsor: formData.value.sponsor,
      status: formData.value.status,
      matchModel: formData.value.matchModel,
      matchModelId: formData.value.matchModelId,
      createUserID: 'current_user' // 这里应该从用户状态获取
    })
    
    console.log('创建赛事API返回结果:', result)
    
    if (result.code === 0) {
      uni.showToast({
        title: '赛事创建成功',
        icon: 'success'
      })
      
      // 延迟返回上一页
      setTimeout(() => {
        goBack()
      }, 1500)
    } else {
      throw new Error(result.msg || '创建失败')
    }
  } catch (error) {
    console.error('创建赛事失败:', error)
    uni.showToast({
      title: error.message || '创建失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 页面加载时获取比赛模式列表
onMounted(() => {
  loadMatchModels()
})
</script>

<style lang="scss" scoped>
.match-create-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .page-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  }
  
  .page-subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.form-section {
  .form-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
    
    .form-item {
      margin-bottom: 30rpx;
      
      .form-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 15rpx;
        font-weight: bold;
      }
      
      .form-input {
        width: 100%;
        height: 80rpx;
        border: 2rpx solid #eee;
        border-radius: 12rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        background: #fff;
        box-sizing: border-box;
      }
      
      .form-picker {
        width: 100%;
        height: 80rpx;
        border: 2rpx solid #eee;
        border-radius: 12rpx;
        padding: 0 20rpx;
        background: #fff;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        
        .picker-text {
          font-size: 28rpx;
          color: #333;
        }
      }
      
      .form-textarea {
        width: 100%;
        height: 120rpx;
        border: 2rpx solid #eee;
        border-radius: 12rpx;
        padding: 20rpx;
        font-size: 28rpx;
        background: #fff;
        resize: none;
        box-sizing: border-box;
      }
    }
    
    .form-buttons {
      display: flex;
      gap: 20rpx;
      margin-top: 40rpx;
      
      .submit-btn,
      .cancel-btn {
        flex: 1;
        height: 80rpx;
        border: none;
        border-radius: 12rpx;
        font-size: 28rpx;
        font-weight: bold;
        
        &.submit-btn {
          background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
          color: #fff;
          
          &:disabled {
            opacity: 0.6;
          }
        }
        
        &.cancel-btn {
          background: #f8f9fa;
          color: #666;
          border: 2rpx solid #eee;
        }
      }
    }
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  .loading-content {
    background: #fff;
    border-radius: 20rpx;
    padding: 60rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .loading-spinner {
      width: 60rpx;
      height: 60rpx;
      border: 4rpx solid #f3f3f3;
      border-top: 4rpx solid #667eea;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20rpx;
    }
    
    .loading-text {
      font-size: 28rpx;
      color: #666;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 